<template>
  <div class="mine">
    <!-- 头部 -->
    <div class="my_header">
      <div style="font-size: 3.58vmin">我的</div>
      <div @click="$router.push('/postup')">
        <span style="font-size: 3.58vmin" class="iconfont icon-wodefabu"></span>
        <p style="font-size: 3.58vmin">发布</p>
      </div>
    </div>
    <!-- 头像区 portrait -->
    <div class="portrait">
      <!-- 头像 -->
      <div class="pic">
        <img :src="imgBase + avatarUrl" alt="" />
      </div>
      <!-- 昵称和ID -->
      <div class="nickname">
        <h4>Rocky</h4>
        <p>ID:1008610016</p>
      </div>
      <!-- 如果时自己就编辑资料，如果时其他人就是关注按钮 -->
      <div class="edit">
        <button @click="$router.push('/myinfo')">编辑资料</button>
      </div>
    </div>
    <!-- 特征区：粉丝、关注、发布的笔记 -->
    <div class="features">
      <!-- 粉丝 -->
      <div class="fans">
        <p>868</p>
        <p>粉丝</p>
      </div>
      <!-- 关注 -->
      <div class="following">
        <p>268</p>
        <p>关注</p>
      </div>
      <!-- 发布的笔记 -->
      <div class="project">
        <p>{{ this.node_num }}</p>
        <p>发布的笔记</p>
      </div>
    </div>
    <!-- 个人简介brief -->
    <div class="brief" style="font-size: 4.11vmin">
      <p>Life is simple it's just not easy</p>
    </div>
    <!-- 笔记、收藏、赞过 -->
    <div class="notes">
      <div class="title" style="font-size: 4.11vmin">
        <div :class="{ active: nodes_index == 10 }" @click="nodes_index = 10">
          笔记
        </div>
        <div :class="{ active: nodes_index == 20 }" @click="nodes_index = 20">
          收藏
        </div>
        <div :class="{ active: nodes_index == 30 }" @click="nodes_index = 30">
          赞过
        </div>
      </div>
      <div class="article">
        <div
          class="box"
          v-if="article_data && article_data.length != 0"
          v-infinite-scroll="loadMore"
        >
          <MineNotes
            v-for="items in this.article_data"
            :items="items"
            :key="items"
          />
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <van-tabbar class="footer" v-model="activeFooter">
      <van-tabbar-item icon="home-o" @click="index">首页</van-tabbar-item>
      <van-tabbar-item icon="chat-o" @click="msg">关注</van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="friend">好友</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import MineNotes from "@/components/MineNotes.vue";
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["imgBase", "avatarUrl"]),
  },
  data() {
    return {
      activeFooter: 3,
      active: 0,
      nodes_index: 10, //笔记收藏，赞过
      page: 1,
      articles: [],
      node_num: 0,
      article_data: [],
    };
  },
  watch: {
    nodes_index(to, from) {
      // to = this.nodes_index;
      window.scrollTo(0, 0);
      this.loadArticles(1, to, (articleList) => {
        this.article_data = articleList;
      });
    },
  },
  mounted() {
    console.log("imgBase" + "avatarUr");
    // 发送http请求，加载UI类别下的首页文章数据
    this.loadArticles(1, 10, (articleList) => {
      this.article_data = articleList;
    });

    // 获取发布的笔记数量
    console.log("userId:", this.$store.state.id);
    let url1 = `/op/articleDo/getArticleCount?userId=${this.$store.state.id}`;
    this.axios
      .get(url1, {
        "Context-Type": "application/json",
        headers: { accesstoken: this.$store.state.accesstoken },
      })
      .then((res) => {
        console.log("自己笔记数量:", res);
        this.node_num = res.data.code;
      });
  },

  methods: {
    loadMore() {
      console.log("到底啦！！！！！！");
      this.page++; // 当前页面自增1
      let cid = this.nodes_index; // 当前选中的类别ID
      this.loadArticles(this.page, cid, (articleList) => {
        this.article_data.push(...articleList);
      });
      // 发送http请求，访问当前类别下的下一页数据
    },

    /** 封装一个方法，接收cid与page，通过callback返回文章列表 */
    loadArticles(page, type1, callback) {
      // 弹出等待框
      // this.$indicator.open({
      //   text: "加载中...",
      //   spinnerType: "fading-circle",
      // });
      let url = `/op/articleDo/getArticleList?pageNum=${page}&userId=${this.$store.state.id}&type=${type1}`;
      this.axios
        .get(url, {
          "Context-Type": "application/json",
          headers: { accesstoken: this.$store.state.accesstoken },
        })
        .then((res) => {
          callback(res.data.data.articleList);
        });
    },
    index() {
      if (this.$route.path == "/index") return;
      this.$router.push("/index");
    },
    msg() {
      if (this.$route.path == "/msg") return;
      this.$router.push("/msg");
    },
    friend() {
      if (this.$route.path == "/friend") return;
      this.$router.push("/friend");
    },
    mine() {
      if (this.$route.path == "/mine") return;
      this.$router.push("/mine");
    },
  },
  components: { MineNotes },
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.mine {
  background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
}
.my_header {
  height: 10.25vmin;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.28vmin 2.56vmin;
}
.portrait {
  margin-top: 5.12vmin;
  display: flex;
  height: 14vmax;
  align-items: center;
  padding: 0 2.66vmin;
  .pic {
    width: 16vmin;
    height: 16vmin;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      display: block;
    }
  }
  .nickname {
    flex: 2;
    margin: 0 3vmin;
    height: 10vmax;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    font-size: 3.7vmin;
    p {
      color: rgb(248, 123, 7);
    }
  }
  .sex {
    flex: 2;
    > span {
      font-size: 7vmin;
    }
  }
  .edit button {
    flex: 1;
    width: 22.6vmin;
    height: 4.2vmax;
    border-radius: 2.1vmax;
    border: none;
    font-size: 3.7vmin;
  }
}
.features {
  width: 87.2vmin;
  height: 11.1vmax;
  margin: 0 auto;
  display: flex;
  div {
    flex: 1;
    height: 11.1vmax;
    font-size: 3.58vmin;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    p {
      margin: 0.75vmax 0;
    }
  }
}
.van-tabbar-item--active {
  color: #f00;
}
.brief {
  padding: 1.28vmin 2.56vmin;
}
.notes {
  font-size: 4.11vmin;
  background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
  margin-top: 2.56vmin;
  // width: 100vmin;
  border-top-left-radius: 2.56vmin;
  border-top-right-radius: 2.56vmin;
  > .title {
    margin: 0 auto;
    display: flex;
    width: 49vmin;
    justify-content: space-around;
    > div {
      line-height: 5.42vmax;
    }
    > .active {
      border-bottom: 4px solid red;
    }
  }
  .article {
    margin-top: 2.56vmin;
    > .box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 3px;
      margin-bottom: 50px;
    }
  }
}
.footer {
  background-color: rgba(245, 212, 169);
}
.van-tabbar-item--active {
  background-color: rgba(245, 212, 169);
  color: rgb(233, 109, 51);
}
</style>
